<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <th:block th:include="MainInterface/include :: common-css" />

</head>

<body class="fixed-left">
<div id="wrapper">

    <th:block th:include="MainInterface/include :: header-menu(5)" />
<!--    <th:block th:include="MainInterface/include :: header-menu(1)" />-->

    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row" >
                    <div class="row" id="all">
                        <div class="col-sm-12">
                            <h1 class="page-title">用户管理</h1>
                        </div>
                        <div class="col-md-12">
                            <table class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <td>用户ID</td>
                                    <td>用户名字</td>
                                    <td>电话号码</td>
                                    <td>密码</td>
                                    <td>性别</td>
                                    <td>年龄</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
    <!--                            <tbody>-->

                                <tr th:each="usersServiceList:${usersPage.list}">
                                    <td>
                                        <a  target="_blank" th:text="${usersServiceList.id}" ></a>
                                    </td>
                                    <td th:text="${usersServiceList.name}">用户名字</td>
                                    <td th:text="${usersServiceList.phone}">电话号码</td>
                                    <td th:text="${usersServiceList.password}">密码</td>
                                    <td  th:text="${usersServiceList.sex}==0?'女':'男'">性别</td>
                                    <td th:text="${usersServiceList.age}">年龄</td>
                                    <td>
                                        <a th:href="${'/userManage/edit'+usersServiceList.id}"
                                           class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
                                            <i class="fa fa-edit"></i> <span>编辑</span></a>
                                        <a href="javascript:void(0)" th:onclick="'delBook('+${usersServiceList.id}+')'"
                                           class="btn btn-danger btn-sm waves-effect waves-light m-b-5">
                                            <i class="fa fa-trash-o"></i> <span>删除</span></a>

                                    </td>
                                </tr>
    <!--                            </tbody>-->
                            </table>
                            <button class="btn btn-primary btn-sm waves-effect waves-light m-b-5" style="background-color:rgb(133,250,133);color: black" onclick="add()">新增数据</button>                    </div>
                        <div>
                            <!--分页-->
                            <div class="clearfix">
                                <ul class="pagination m-b-5 pull-right">
                                    <li th:if="${!usersPage.isFirstPage}" >
                                        <a th:href="${'/userManage/?pageNum='+usersPage.prePage}">>上一页</a>
                                    </li>
                                    <li  th:each="num:${usersPage.navigatepageNums}">
                                        <a th:href="${'/userManage/?pageNum='+num}" th:text="${num}">1</a>
                                    <li th:if="${!usersPage.isLastPage}" >
                                        <a th:href="${'/userManage/?pageNum='+usersPage.nextPage}">下一页</a>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <!-- 新增页面 -->
                    <div id="add" style="display: none">
                        <div class="dialog">
                        <form id="bookList">
                            <div class="dialog-box">
                                <h1>新增用户</h1>

                                <p>用户名 : <input name="name" ></p>
                                <p>手机号 : <input name="phone" ></p>
                                <p>
                                    密码 :
                                    <input name="password" >
                                </p>

                                <p>性别 :
                                    <select name="sex">
                                        <option value="0">女</option>
                                        <option value="1">男</option>
                                    </select>
                                </p>
                                <p>
                                    年龄 :
                                    <input name="age">
                                </p>
                                <div>
                                    <input style="width: 75px ; height : 50px " type="button" value="保存" onclick="bookAdd()">
                                    <!--            <button id="book_save" >提交</button>-->
                                    <button style="width: 75px ; height : 50px "> <a href="/userManage">返回</a></button>
                                </div>
                            </div>
                        </form>
                        </div>



                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<th:block th:include="MainInterface/include :: foter" />
<th:block th:include="MainInterface/include :: common-js" />

<!--                <td >-->
<!--                    <button style="background-color:rgb(248,255,137);color: black">修改</button>-->
<!--                    <button style="background-color:rgb(232,15,15);color: black" href="javascript:void(0)" th:onclick="'delBook('+${booksList.id}+')'">删除</button>-->
<!--                </td>-->
<!--            </tr>-->
<!--        </table>-->
<!--        <button style="background-color:rgb(133,250,133);color: black">新增数据</button>-->
<!--    </div>-->
<!--</div>-->
<script>
    function delBook(id){
        if(confirm('确定删除该数据吗?')){
            $.ajax({
                type:"post",
                url:"/userManage/delete",
                data:{id:id},
                dataType: 'json',
                success:function (result) {
                    if(result.code==0){
                        window.alert("删除成功");
                        window.location.reload();
                    } else {
                        window.alert(result.msg || "删除失败");
                    }

                }
            });
        }

    }
    function bookAdd(){
        // $("#add").show();
        $.ajax({
            type:"post",
            url:"/userManage/saveOrUpdata",
            data:$("#bookList").serialize(),
            async:false,
            dataType: 'json',
            success:function (result) {
                console.log($("#bookList").serialize(),)
                if(result.code==0){
                    window.alert("添加成功");
                    window.location.href="/userManage"
                } else {
                    window.alert(result.msg || "添加失败");
                }

            }
        });
    }

    function add(){
        $("#add").show();
        $("#all").hide();
    }

</script>
</body>
<style>
    .id{
        position: relative;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
    }
    table td {
        font-size: 12px;
        padding: 10px 30px;

        border-bottom: 1px solid #999;

        border-right: 1px solid #999;
    }
    table {
        border-top: 1px solid #999;

        border-left: 1px solid #999;

        border-spacing: 0;/*去掉单元格间隙*/

    }

</style>
</html>
</html>

